import userCenterRefreshJwtSecretSufApi from '@/api/userCenter/userCenterRefreshJwtSecretSufApi'
import { getAppNav } from '@/App'
import { useAppSelector } from '@/store'
import { execConfirm, ToastSuccess } from '@/util/CommonUtil'
import { Button, List, Typography } from '@douyinfe/semi-ui'
import { useState } from 'react'
import BindEmail from '../BindEmail/BindEmail'
import BindPhone from '../BindPhone/BindPhone'
import DelAccount from '../DelAccount/DelAccount'
import LoginRecord from '../LoginRecord/LoginRecord'
import UpdateEmail from '../UpdateEmail/UpdateEmail'
import UpdatePassword from '../UpdatePassword/UpdatePassword'
import UpdatePhone from '../UpdatePhone/UpdatePhone'

export default function AccountSettings() {
  const [delAccountModalVisible, setDelAccountModalVisible] = useState(false) // 账号注销
  const [updatePasswordModalVisible, setUpdatePasswordModalVisible] =
    useState(false) // 修改密码
  const [loginRecordModalVisible, setLoginRecordModalVisible] = useState(false) // 登录记录
  const [updateEmailModalVisible, setUpdateEmailModalVisible] = useState(false) // 修改邮箱
  const [bindEmailModalVisible, setBindEmailModalVisible] = useState(false) // 绑定邮箱
  const [updatePhoneModalVisible, setUpdatePhoneModalVisible] = useState(false) // 修改手机
  const [bindPhoneModalVisible, setBindPhoneModalVisible] = useState(false) // 绑定手机
  const userBaseInfo = useAppSelector((state) => state.user.userBaseInfo)

  return (
    <>
      <List className="w-680 m-l-20 m-t-20">
        <List.Item
          main="密码"
          extra={
            <Button
              theme="borderless"
              onClick={() => {
                if (userBaseInfo.passwordFlag) {
                  setUpdatePasswordModalVisible(true)
                } else {
                  getAppNav()('/forgotPasswordSend')
                }
              }}
            >
              {userBaseInfo.passwordFlag ? '修改密码' : '设置密码'}
            </Button>
          }
        />
        <List.Item
          main={
            <div className="flex-c">
              邮箱
              <Typography.Text type="tertiary">
                {userBaseInfo.email}
              </Typography.Text>
            </div>
          }
          extra={
            <Button
              theme="borderless"
              onClick={() => {
                if (userBaseInfo.email) {
                  setUpdateEmailModalVisible(true)
                } else {
                  setBindEmailModalVisible(true)
                }
              }}
            >
              {userBaseInfo.email ? '修改邮箱' : '绑定邮箱'}
            </Button>
          }
        />
        <List.Item
          main={
            <div className="flex-c">
              手机
              <Typography.Text type="tertiary">
                {userBaseInfo.phone}
              </Typography.Text>
            </div>
          }
          extra={
            <Button
              theme="borderless"
              onClick={() => {
                if (userBaseInfo.phone) {
                  setUpdatePhoneModalVisible(true)
                } else {
                  setBindPhoneModalVisible(true)
                }
              }}
            >
              {userBaseInfo.phone ? '修改手机' : '绑定手机'}
            </Button>
          }
        />
        <List.Item
          main={
            <div className="flex-c">
              刷新令牌
              <Typography.Text type="tertiary">
                刷新之后，执行任意操作，都会要求重新登录，用于：不修改密码，退出所有登录
              </Typography.Text>
            </div>
          }
          extra={
            <Button
              theme="borderless"
              onClick={() => {
                execConfirm(() => {
                  return userCenterRefreshJwtSecretSufApi().then(({ data }) => {
                    ToastSuccess(data.msg)
                  })
                })
              }}
            >
              执行刷新
            </Button>
          }
        />
        <List.Item
          main="登录记录"
          extra={
            <Button
              theme="borderless"
              onClick={() => {
                setLoginRecordModalVisible(true)
              }}
            >
              查看记录
            </Button>
          }
        />
        <List.Item
          main="账号注销"
          extra={
            <Button
              type="danger"
              theme="borderless"
              onClick={() => {
                setDelAccountModalVisible(true)
              }}
            >
              立即注销
            </Button>
          }
        />
      </List>

      <UpdatePassword
        modalVisible={updatePasswordModalVisible}
        setModalVisible={setUpdatePasswordModalVisible}
      />
      <LoginRecord
        modalVisible={loginRecordModalVisible}
        setModalVisible={setLoginRecordModalVisible}
      />
      <DelAccount
        modalVisible={delAccountModalVisible}
        setModalVisible={setDelAccountModalVisible}
      />
      <UpdateEmail
        modalVisible={updateEmailModalVisible}
        setModalVisible={setUpdateEmailModalVisible}
      />
      <BindEmail
        modalVisible={bindEmailModalVisible}
        setModalVisible={setBindEmailModalVisible}
      />
      <UpdatePhone
        modalVisible={updatePhoneModalVisible}
        setModalVisible={setUpdatePhoneModalVisible}
      />
      <BindPhone
        modalVisible={bindPhoneModalVisible}
        setModalVisible={setBindPhoneModalVisible}
      />
    </>
  )
}
